<template>
  <div class='page-combo'>
    <div class="combo">
      <div class="title">
        <img src="/img/pc/course-combo.png" alt=""><span>套餐</span>
      </div>
      <div class="content">
          <combo-card
            v-for="(item, index) in combo_course_list"
            :key="index"
            :detail="item"
          ></combo-card>
      </div>
      <div class="footer">
        <Page :total="total" :page-size="pageSize" :current="page" @on-change="handleChangePage" />
      </div>

    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import ComboCard from "~/components/pc/ComboCard.vue";
import { getCourseComboList } from "~/api/course-combo";
export default {
  data() {
    return {
      combo_course_list: [],
      pageSize: 10,
      page: 1,
      total: 0,
    };
  },
  components: {
    ComboCard
  },
  created() {
    this.getCourseCombo();
  },
  mounted() {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    // 路由跳转
    linkTo(path) {
      this.$router.push({
        path,
      });
    },
    //分页处理
    handleChangePage(n) {
      this.page = n;
      this.getCourseCombo();
    },
    //获取资讯
    async getCourseCombo() {
      this.SET_IS_LOADING(true);
      let params = {
        sort: "id desc",
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
      };
      let result = await getCourseComboList(params);
      if (result && result.data && result.data.code == 200) {
        this.combo_course_list = result.data.data.rows;
        this.total = result.data.data.total;
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    },
  },
};
</script>
<style lang='scss' scoped>
.page-combo {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
  display: flex;

  .combo {
    width: 100%;
    box-sizing: border-box;
    padding-right: 60px;
    padding-left: 20px;

    .title {
      font-size: 24px;
      font-weight: bold;
      color: #666666;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      img {
        display: block;
        background-color: var(--theme-color);
      }
    }
    .content{
        display: flex;
        flex-wrap: wrap;
        width: 1200px;
    }
    .footer {
      text-align: center;
      margin-top: 20px;
    }
  }
  
}
</style>